<!--模板分享-->
<template>
  <div>
      <div class="ibody">
  <header>
    <h1>如影随形</h1>
    <h2>影子是一个会撒谎的精灵，它在虚空中流浪和等待被发现之间;在存在与不存在之间....</h2>
    <div class="logo"><a href="/"></a></div>
    <nav id="topnav">
        <router-link to='/'>首页</router-link>
        <router-link to='/about'>关于我</router-link>
        <router-link to='/newlist'>慢生活</router-link>
        <router-link to='/share'>模板分享</router-link>
        <router-link to='/new'>模板主题</router-link>
    </nav>
  </header>
  <article>
    <h2 class="about_h">您现在的位置是：<a href="/">首页</a>><a href="1/">模板分享</a>><a href="1/">个人博客模板</a></h2>
    <div class="template">
      <h3>
        <p><span>个人博客</span>模板</p>
        <a href="/" class="more">更多>></a> </h3>
      <ul>
        <li><a href="/"  target="_blank"><img src="../../assets/images/t00.jpg"></a><span>黑色Html5个人博客模板主题《如影随形》</span></li>
        <li><a href="/"  target="_blank"><img src="../../assets/images/t01.jpg"></a><span>仿新浪博客风格·梅——古典个人博客模板</span></li>
        <li><a href="/" target="_blank"><img src="../../assets/images/t02.jpg"></a><span>黑色质感时间轴html5个人博客模板</span></li>
        <li><a href="/"  target="_blank"><img src="../../assets/images/t03.jpg"></a><span>Green绿色小清新的夏天-个人博客模板</span></li>
        <li><a href="/" target="_blank"><img src="../../assets/images/t04.jpg"></a><span>女生清新个人博客网站模板</span></li>
        <li><a href="/"  target="_blank"><img src="../../assets/images/t05.jpg"></a><span>黑色质感时间轴html5个人博客模板</span></li>
        <li><a href="/"  target="_blank"><img src="../../assets/images/t06.jpg"></a><span>Green绿色小清新的夏天-个人博客模板</span></li>
        <li><a href="/"  target="_blank"><img src="../../assets/images/01.jpg"></a><span>仿新浪博客风格·梅——古典个人博客模板</span></li>
        <li><a href="/" target="_blank"><img src="../../assets/images/02.jpg"></a><span>黑色质感时间轴html5个人博客模板</span></li>
        <li><a href="/" target="_blank"><img src="../../assets/images/04.jpg"></a><span>女生清新个人博客网站模板</span></li>
        <li><a href="/"  target="_blank"><img src="../../assets/images/02.jpg"></a><span>黑色质感时间轴html5个人博客模板</span></li>
        <li><a href="/"  target="_blank"><img src="../../assets/images/03.jpg"></a><span>Green绿色小清新的夏天-个人博客模板</span></li>
      </ul>
      <h3>
        <p><span>企业</span>网站模板</p>
        <a href="/" class="more">更多>></a> </h3>
      <ul>
        <li><a href="/"  target="_blank"><img src="../../assets/images/01.jpg"></a><span>仿新浪博客风格·梅——古典个人博客模板</span></li>
        <li><a href="/" target="_blank"><img src="../../assets/images/02.jpg"></a><span>黑色质感时间轴html5个人博客模板</span></li>
        <li><a href="/"  target="_blank"><img src="../../assets/images/03.jpg"></a><span>Green绿色小清新的夏天-个人博客模板</span></li>
        <li><a href="/" target="_blank"><img src="../../assets/images/04.jpg"></a><span>女生清新个人博客网站模板</span></li>
        <li><a href="/"  target="_blank"><img src="../../assets/images/02.jpg"></a><span>黑色质感时间轴html5个人博客模板</span></li>
        <li><a href="/"  target="_blank"><img src="../../assets/images/03.jpg"></a><span>Green绿色小清新的夏天-个人博客模板</span></li>
      </ul>
      <h3>
        <p>个人<span>作品</span></p>
        <a href="/" class="more">更多>></a> </h3>
      <ul>
        <li><a href="/"  target="_blank"><img src="../../assets/images/01.jpg"></a><span>仿新浪博客风格·梅——古典个人博客模板</span></li>
        <li><a href="/" target="_blank"><img src="../../assets/images/02.jpg"></a><span>黑色质感时间轴html5个人博客模板</span></li>
        <li><a href="/"  target="_blank"><img src="../../assets/images/03.jpg"></a><span>Green绿色小清新的夏天-个人博客模板</span></li>
        <li><a href="/" target="_blank"><img src="../../assets/images/04.jpg"></a><span>女生清新个人博客网站模板</span></li>
        <li><a href="/"  target="_blank"><img src="../../assets/images/02.jpg"></a><span>黑色质感时间轴html5个人博客模板</span></li>
        <li><a href="/"  target="_blank"><img src="../../assets/images/03.jpg"></a><span>Green绿色小清新的夏天-个人博客模板</span></li>
      </ul>
      <h3>
        <p><span>国外</span>Html5模板</p>
        <a href="/" class="more">更多>></a> </h3>
      <ul>
        <li><a href="/"  target="_blank"><img src="../../assets/images/01.jpg"></a><span>仿新浪博客风格·梅——古典个人博客模板</span></li>
        <li><a href="/" target="_blank"><img src="../../assets/images/02.jpg"></a><span>黑色质感时间轴html5个人博客模板</span></li>
        <li><a href="/"  target="_blank"><img src="../../assets/images/03.jpg"></a><span>Green绿色小清新的夏天-个人博客模板</span></li>
        <li><a href="/" target="_blank"><img src="../../assets/images/04.jpg"></a><span>女生清新个人博客网站模板</span></li>
        <li><a href="/"  target="_blank"><img src="../../assets/images/02.jpg"></a><span>黑色质感时间轴html5个人博客模板</span></li>
        <li><a href="/"  target="_blank"><img src="../../assets/images/03.jpg"></a><span>Green绿色小清新的夏天-个人博客模板</span></li>
      </ul>
    </div>
    <div class="page"><a title="Total record"><b>113</b></a><b>1</b><a href="/">2</a><a href="/">3</a><a href="/">4</a><a href="/">5</a><a href="/">&gt;</a><a href="/">&gt;&gt;</a></div>
  </article>
  <aside>
    <div class="rnav">
      <li class="rnav1 "><a href="/">个人博客模板</a></li>
      <li class="rnav2 "><a href="/">企业网站模板</a></li>
      <li class="rnav3 "><a href="/">个人作品</a></li>
      <li class="rnav4 "><a href="/">国外html5模板</a></li>
    </div>
    <div class="ph_news">
      <h2>
        <p>点击排行</p>
      </h2>
      <ul class="ph_n">
        <li><span class="num1">1</span><a href="/">有一种思念，是淡淡的幸福,一个心情一行文字</a></li>
        <li><span class="num2">2</span><a href="/">励志人生-要做一个潇洒的女人</a></li>
        <li><span class="num3">3</span><a href="/">女孩都有浪漫的小情怀——浪漫的求婚词</a></li>
        <li><span>4</span><a href="/">Green绿色小清新的夏天-个人博客模板</a></li>
        <li><span>5</span><a href="/">女生清新个人博客网站模板</a></li>
        <li><span>6</span><a href="/">Wedding-婚礼主题、情人节网站模板</a></li>
        <li><span>7</span><a href="/">Column 三栏布局 个人网站模板</a></li>
        <li><span>8</span><a href="/">时间煮雨-个人网站模板</a></li>
        <li><span>9</span><a href="/">花气袭人是酒香—个人网站模板</a></li>
      </ul>
      <h2>
        <p>栏目推荐</p>
      </h2>
      <ul>
        <li><a href="/">有一种思念，是淡淡的幸福,一个心情一行文字</a></li>
        <li><a href="/">励志人生-要做一个潇洒的女人</a></li>
        <li><a href="/">女孩都有浪漫的小情怀——浪漫的求婚词</a></li>
        <li><a href="/">Green绿色小清新的夏天-个人博客模板</a></li>
        <li><a href="/">女生清新个人博客网站模板</a></li>
        <li><a href="/">Wedding-婚礼主题、情人节网站模板</a></li>
        <li><a href="/">Column 三栏布局 个人网站模板</a></li>
        <li><a href="/">时间煮雨-个人网站模板</a></li>
        <li><a href="/">花气袭人是酒香—个人网站模板</a></li>
      </ul>
      <h2>
        <p>最新评论</p>
      </h2>
      <ul class="pl_n">
        <dl>
          <dt><img src="../../assets/images/s8.jpg"> </dt>
          <dt> </dt>
          <dd>DanceSmile
            <time>49分钟前</time>
          </dd>
          <dd><a href="/">文章非常详细，我很喜欢.前端的工程师很少，我记得几年前yahoo花高薪招聘前端也招不到</a></dd>
        </dl>
        <dl>
          <dt><img src="../../assets/images/s7.jpg"> </dt>
          <dt> </dt>
          <dd>yisa
            <time>2小时前</time>
          </dd>
          <dd><a href="/">我手机里面也有这样一个号码存在</a></dd>
        </dl>
        <dl>
          <dt><img src="../../assets/images/s6.jpg"> </dt>
          <dt> </dt>
          <dd>小林博客
            <time>8月7日</time>
          </dd>
          <dd><a href="/">博客色彩丰富，很是好看</a></dd>
        </dl>
        <dl>
          <dt><img src="../../assets/images/003.jpg"> </dt>
          <dt> </dt>
          <dd>DanceSmile
            <time>49分钟前</time>
          </dd>
          <dd><a href="/">文章非常详细，我很喜欢.前端的工程师很少，我记得几年前yahoo花高薪招聘前端也招不到</a></dd>
        </dl>
        <dl>
          <dt><img src="../../assets/images/002.jpg"> </dt>
          <dt> </dt>
          <dd>yisa
            <time>2小时前</time>
          </dd>
          <dd><a href="/">我手机里面也有这样一个号码存在</a></dd>
        </dl>
      </ul>
      <h2>
        <p>最近访客</p>
        <ul>
          <img src="../../assets/images/vis.jpg"><!-- 直接使用“多说”插件的调用代码 -->
        </ul>
      </h2>
    </div>
    <div class="copyright">
      <ul>
        <p> Design by <a href="/">DanceSmile</a></p>
        <p>蜀ICP备11002373号-1</p>
      </ul>
    </div>
  </aside>
  <div class="clear"></div>
  <!-- 清除浮动 --> 
</div>
  </div>
</template>

<script>
export default {
  data () {
    return {
    }
  }
}

</script>
<style lang='scss' scoped>
.about_h { font-size: 12px; color: #666; line-height: 30px; height: 30px; border-bottom: #d7d7d7 1px solid; padding-left: 60px; margin: 20px; background: url('../../assets/images/5849.png') 40px 5px no-repeat; }
.about_h a { color: #666; margin: 0 5px; }
.about_h a:hover { color: #e41635 }
.newblog { margin: 0 20px 20px 20px; border-bottom: #dcdcdc 1px dashed; position: relative; clear: both; display: inline-block; padding-bottom: 20px; }
.newblog h3 { font-size: 14px; font-weight: bold; margin-bottom: 10px }
.newblog h3 a { color: #181818; }
.newblog h3 a:hover { text-decoration: underline }
.newblog ul { float: left; line-height: 20px; width: 72%; color: #474645; }
.newblog::before { content: ""; width: 10px; height: 10px; border-radius: 50%; position: absolute; background: #cac1c1; border: 2px solid #fff; left: -27px; -webkit-transition: all 1s; -moz-transition: all 1s; -o-transition: all 1s; transition: all 1s; }
.newblog:hover::before { background: #474645 }
.dateview { position: absolute; left: -125px; top: 0px; z-index: 1; color: #F5F5F5; }
.newblog::after { content: ""; width: 121px; height: 29px; position: absolute; left: -148px; top: -9px; z-index: 0; background: #474645 url('../../assets/images/ti.png') no-repeat; opacity: 0; -webkit-transition: all 1s; -moz-transition: all 1s; -o-transition: all 1s; transition: all 1s; }
.newblog:hover::after { opacity: 1 }
.dateview { position: absolute; left: -125px; top: 0px; z-index: 1; color: #F5F5F5; }
.newblog figure { float: right; width: 25%; overflow: hidden; }
.newblog figure img { width: 100%; margin: auto; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; }
.newblog figure:hover img { -moz-transform: scale(1.1); -webkit-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); }
a.readmore { color: #f55f77; margin-left: 10px; font-weight: bold }
.autor { color: #8c8d8d; line-height: 26px; background: url('../../assets/images/5794.png') no-repeat left; padding-left: 25px }
.autor a { color: #0f9c7c; font-weight: bold }
.autor span { margin: 0 5px 0 0; }
.page { margin: 20px 0; text-align: center; width: 100%; overflow: hidden; }
.page a b { color: #999; }
.page>b, .page a { margin: 0 2px; height: 26px; line-height: 26px; border-radius: 50%; width: 26px; text-align: center; display: inline-block }
.page a { margin: 0 2px; height: 26px; line-height: 26px; border-radius: 50%; width: 26px; text-align: center; display: inline-block }/* 针对IE6 */
.page>b, .page a:hover { background: #333; color: #FFF; }
.page a { color: #F33; border: #999 1px solid; }
.rnav { width: 120px; margin: 20px auto; overflow: hidden; }
.rnav li { width: 120px; text-align: center; display: inline-block; margin-bottom: 2px; height: 40px; line-height: 40px }
.rnav li a { color: #FFF; display: block; -webkit-transition: all 1s; -moz-transition: all 1s; -o-transition: all 1s; transition: all 1s }
.rnav1 { background: #e41637 }
.rnav2 { background: #f16b17 }
.rnav3 { background: #0f9c7c }
.rnav4 { background: #46ce14 }
.rnav li a:hover { background: rgba(255,255,255,0.2); -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); }
.ph_news h2 { font-size: 16px; font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif; color: #FFF; }
.ph_news h2 p { height: 40px; line-height: 40px; width: 100px; padding: 0 0 0 30px; border-radius: 0 20px 20px 0; text-shadow: rgba(0,0,0,.65) 1px 1px; background: #0f9c7c }
.ph_news ul { margin: 10px }
.ph_news li { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; width: 100%; color: #cdcbcb; line-height: 24px; height: 24px; }
.ph_news li a { color: #cdcbcb; }
.ph_news li a:hover, .pl_n dd a:hover { text-decoration: underline }
.ph_n li span { margin-right: 10px; font-family: "微软雅黑"; color: #FFF; background: #404040; padding: 0 5px }
.ph_n li span.num1, .ph_n li span.num2, .ph_n li span.num3 { background: #f16b17 }
/* 最新评论 */
.pl_n dl { display: block; overflow: hidden; margin-bottom: 12px; color: #cdcbcb; }
.pl_n dd { line-height: 22px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden }
.pl_n dd a { color: #555454 }
.pl_n time { color: #066; margin-left: 10px }
.pl_n dt { float: left; }
.pl_n dt img { width: 50px; height: 50px; margin-right: 10px; border-radius: 50%; transition: all 1s }
.pl_n dt img:hover { -webkit-transform: rotate(360deg); -ms-transform: rotate(30deg); -moz-transform: rotate(30deg); -o-transform: rotate(30deg); transform: rotate(30deg); }
.index_about { margin: 20px }
.c_titile { font-size: 22px; margin: 20px 0; text-align: center; font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif; }
.box_c { color: #999; text-align: center }
.box_c span { margin: 0 10px; }
.box_c span a { color: #099; }
ul.infos { overflow: hidden; margin: 20px 0; line-height: 28px; font-size: 14px; text-indent: 2em; color: #525554 }
ul.infos p { margin-bottom: 10px }
ul.infos p img { display: block; margin: auto }
.keybq { background: url('../../assets/images/6264.png') no-repeat 10px center #F8F8F8; line-height: 30px; height: 30px; padding-left: 40px; border: 1px solid #F0F0F0; margin: 20px 0; }
.keybq span { color: #099 }
.nextinfo { line-height: 24px; }
.nextinfo a, .otherlink li a { color: #756f71 }
.otherlink h2 { border-bottom: #099 2px solid; line-height: 40px; font-size: 12px; background: url('../../assets/images/5794.png') 10px center no-repeat; padding-left: 40px; color: #099 }
.otherlink ul { margin: 10px 0 }
.otherlink li { line-height: 24px; height: 24px; display: block; width: 290px; float: left; overflow: hidden; margin-right: 30px; }
.otherlink li a:hover, .nextinfo a:hover { text-decoration: underline }
.template { margin: 0 10px 0 10px; }
.template h3 { border-bottom: #333 2px solid; width: 100%; overflow: hidden; font-size: 14px; font-family: "微软雅黑"; display: block; clear: both; margin-bottom: 10px; position: relative }
.template h3 p { background: #474645; width: 180px; height: 25px; line-height: 25px; color: #fff; text-align: center; box-shadow: #999 4px 5px 1px; }
.template h3 p span { color: #38b3d4; }
.template ul li { margin: 3px; float: left; display: block; padding: 5px 5px 6px 5px; -webkit-transition: all 1s; -moz-transition: all 1s; -o-transition: all 1s; transition: all 1s; }
.template li img { width: 142px; height: 80px; background: #FFF; padding: 4px; box-shadow: 0px 0px 2px rgba(0,0,0,.5); display: block; }
.template li span { color: #fff; display: block; text-align: center; margin-top: 5px; width: 142px; overflow: hidden; text-overflow: ellipsis; height: 14px }
.template li:hover { background: #666; padding: 5px 5px 6px 5px; }
a.more { position: absolute; right: 0; top: 4px; color: #666; font-size: 12px }
</style>